import styles from './styles.module.less'
import { Button, Form, Input, Checkbox, Select, Modal } from 'antd'
import qq from '@/images/QQ.png'
import weixin from '@/images/weixin.png'
import weibo from '@/images/weibo.png'
import { fromType } from '@/types'
import { useState } from 'react'

const LoginForm = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [stateNum, setStateNum] = useState(0)
  // 0 注册
  // 1 登录
  // 2手机号登录
  const { Option } = Select
  const [isCode, setIsCode] = useState(false)
  const [codeTime, setCodeTime] = useState(0)

  // const getTime = () => {
  //   setCodeTime(60)
  //   setIsCode(true)
  //   const timer = setInterval(() => {
  //     if (codeTime > 0) {
  //       setCodeTime(codeTime - 1)
  //     } else {
  //       setIsCode(false)
  //       clearInterval(timer)
  //     }
  //   }, 1000)
  // }
  //存在闭包问题

  const ToPrivacy = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
    e.preventDefault()
    window.open('/privacy', '_blank', 'noopener noreferrer')
  }

  const showModal = () => {
    setIsModalOpen(true)
  }

  const handleOk = () => {
    setIsModalOpen(false)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const onFinish = (values: fromType) => {
    console.log('接收到的表单值 ', values)
  }

  const getTime = () => {
    setCodeTime(60)
    setIsCode(true)
    const timer = setInterval(() => {
      setCodeTime((prevCodeTime) => {
        if (prevCodeTime > 0) {
          return prevCodeTime - 1
        } else {
          setIsCode(false)
          clearInterval(timer)
          return 0
        }
      })
    }, 1000)
  }

  const prefixSelector = (
    <Form.Item name="prefix" noStyle initialValue={'86'}>
      <Select style={{ width: '70px' }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  )
  return (
    <div className={styles.from}>
      <p className={styles.text}>
        已有账号？
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault()
            setStateNum(1)
          }}
        >
          去登录
        </a>
      </p>
      <div className={styles.content}>
        {stateNum === 0 && <div className={styles.title}>账号注册</div>}
        {stateNum === 1 && <div className={styles.title}>账号登录</div>}
        {stateNum === 2 && <div className={styles.title}>手机号登录</div>}

        <div className={styles.nav}>
          <Button
            type="primary"
            className={styles.AntButton}
            onClick={(e) => {
              e.preventDefault()
              if (stateNum === 0) setStateNum(2)
              else setStateNum(0)
            }}
          >
            {stateNum === 0 ? '手机号注册' : '账号注册'}
          </Button>
          <div className={styles.box} onClick={showModal}>
            <img src={qq} alt="" />
            <span>QQ登录</span>
          </div>

          <div className={styles.box} onClick={showModal}>
            <img src={weibo} alt="" />
            <span>微博登录</span>
          </div>

          <div className={styles.box} onClick={showModal}>
            <img src={weixin} alt="" />
            <span>微信登录</span>
          </div>
        </div>
        <div className={styles.fromContent}>
          <div className={styles.line}>
            <span>or</span>
          </div>
          {stateNum === 0 && (
            <Form
              name="register"
              labelCol={{
                span: 24,
                style: { fontWeight: '600' },
              }}
              wrapperCol={{ span: 24 }}
              style={{ maxWidth: 600 }}
              initialValues={{ remember: true }}
              autoComplete="off"
              onFinish={onFinish}
            >
              <Form.Item label="用户名" name="username">
                <Input className={styles.AntInput} placeholder="请输入用户名" />
              </Form.Item>

              <Form.Item label="密码" name="password">
                <Input.Password
                  className={styles.AntInput}
                  placeholder="请输入密码"
                />
              </Form.Item>

              <Form.Item
                name="confirm"
                label="确认密码"
                dependencies={['password']}
                hasFeedback
                rules={[
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue('password') === value) {
                        return Promise.resolve()
                      }
                      return Promise.reject(new Error('您输入的新密码不匹配'))
                    },
                  }),
                ]}
              >
                <Input.Password
                  className={styles.AntInput}
                  placeholder="请再次输入密码"
                />
              </Form.Item>
              <Form.Item name="remember" valuePropName="checked" label={null}>
                <Checkbox style={{ color: '#666' }}>
                  同意{' '}
                  <a href="#" onClick={(e) => ToPrivacy(e)}>
                    用户协议
                  </a>{' '}
                  和{' '}
                  <a href="#" onClick={(e) => ToPrivacy(e)}>
                    隐私政策
                  </a>
                </Checkbox>
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  // className={styles.AntButton}
                  style={{
                    backgroundColor: '#ea4c89',
                    padding: '0 50px',
                    fontSize: '20px',
                    height: '40px',
                  }}
                >
                  注册
                </Button>
              </Form.Item>
            </Form>
          )}
          {stateNum === 1 && (
            <Form
              name="login"
              labelCol={{
                span: 24,
                style: { fontWeight: '600' },
              }}
              wrapperCol={{ span: 24 }}
              style={{ maxWidth: 600 }}
              initialValues={{ remember: true }}
              autoComplete="off"
              onFinish={onFinish}
            >
              <Form.Item label="用户名" name="username">
                <Input className={styles.AntInput} placeholder="请输入用户名" />
              </Form.Item>

              <Form.Item label="密码" name="password">
                <Input.Password
                  className={styles.AntInput}
                  placeholder="请输入密码"
                />
              </Form.Item>

              <Form.Item name="remember" valuePropName="checked" label={null}>
                <Checkbox style={{ color: '#666' }}>记住密码</Checkbox>
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  // className={styles.AntButton}
                  style={{
                    backgroundColor: '#ea4c89',
                    padding: '0 50px',
                    fontSize: '20px',
                    height: '40px',
                  }}
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          )}
          {stateNum === 2 && (
            <Form
              name="login with SMS verification"
              labelCol={{
                span: 24,
                style: { fontWeight: '600' },
              }}
              wrapperCol={{ span: 24 }}
              style={{ maxWidth: 600 }}
              initialValues={{ remember: true }}
              autoComplete="off"
              onFinish={onFinish}
            >
              <Form.Item name="phone" label="手机号">
                <Input
                  addonBefore={prefixSelector}
                  className={styles.AntInput1}
                  placeholder="请输入您的手机号"
                />
              </Form.Item>
              <Form.Item label="验证码" name="code" wrapperCol={{ span: 12 }}>
                <Input
                  addonAfter={
                    <div
                      style={{
                        color: '#fff',
                        fontWeight: '500',
                        fontSize: '16px',
                      }}
                      onClick={() => {
                        if (!isCode) {
                          getTime()
                        }
                      }}
                    >
                      {isCode ? `重新发送(${codeTime})` : '获取验证码'}
                    </div>
                  }
                  className={styles.AntInput2}
                  placeholder="请输入验证码"
                />
              </Form.Item>
              <Form.Item name="remember" valuePropName="checked" label={null}>
                <Checkbox style={{ color: '#666' }}>
                  同意{' '}
                  <a href="#" onClick={(e) => ToPrivacy(e)}>
                    用户协议
                  </a>{' '}
                  和{' '}
                  <a href="#" onClick={(e) => ToPrivacy(e)}>
                    隐私政策
                  </a>
                </Checkbox>
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  // className={styles.AntButton}
                  style={{
                    backgroundColor: '#ea4c89',
                    padding: '0 50px',
                    fontSize: '20px',
                    height: '40px',
                  }}
                >
                  验证并登录
                </Button>
              </Form.Item>
            </Form>
          )}
        </div>
        <div className={styles.footerText}>
          本网站使用浏览器{' '}
          <a href="#" onClick={(e) => ToPrivacy(e)}>
            安全政策
          </a>{' '}
          和{' '}
          <a href="#" onClick={(e) => ToPrivacy(e)}>
            隐私政策
          </a>
        </div>
      </div>
      <Modal
        title="开发者提示"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
        centered
      >
        <p style={{ fontSize: '30px', margin: '50px 0' }}>
          该功能尚在开发中，敬请期待！
        </p>
      </Modal>
    </div>
  )
}

export default LoginForm
